<template>
    <div class="card-detail">
        <div class="img-box">
            <img :src="cardDetail.imgUrl" alt="">
        </div>
        <div class="card-detail-info" >
            <p class="name">{{ cardDetail.title}}</p>
<!--            <p class="username">{{ cardDetail.subtitle}}</p>-->
        </div>
        <div class="footer-btns" v-show="cardDetail.cardId">
            <div class="footer-btn footer-btn1" @click="handleTo">再设计</div>
            <div class="footer-btn footer-btn2" @click="handlePrint">打印该卡片</div>
        </div>
        <van-popup
            :show="show"
            position="bottom"
            @close="handleClose"
        >
            <div class="popup" v-show="shopDetail.id">
                <div class="header">
                    <span>选择店铺</span>
                    <span @click="handleResetShop" style="color: #18CB69">
                        <van-icon name="replay" />
                        重新选择
                    </span>
                </div>
                <div class="shop-confirm-box">
                    <div class="shop-checked">
                        {{ shopDetail.shopName }}
                    </div>
                </div>
                <div class="shop-confirm-btn-box">
                    <div class="shop-confirm-btn" @click="handleConfirm">确认打印卡片</div>
                    <div class="shop-confirm-tips">确认打印卡片前，确保正确的店铺</div>
                </div>
            </div>
            <div class="popup" v-show="!shopDetail.id">
                <div class="header">
                    <span>选择店铺</span>
                    <van-icon name="cross" @click="handleClose"/>
                </div>
                <div class="search">
                    <van-search
                        :value="searchValue"
                        label=" "
                        placeholder="搜索店铺品牌名称"
                        use-action-slot
                        @change="onChange"
                        @search="onSearch"
                    >
                        <div slot="action" @click="onSearch">搜索</div>
                    </van-search>
                </div>
                <div class="map">
                    <div class="shop-item" v-for="item in shopList" :key="item.id" @click="handleChangeShop(item)">
                        <span>{{ item.shopName }}</span>
                    </div>
                </div>
            </div>
        </van-popup>

    </div>
</template>

<script>
import {cardRequest, searchShop} from "@/api";
import request from '@/utils/request'
import Interceptor from '@/utils/Interceptor'
export default {
    name: "index",
    data() {
        return {
            cardDetail: {
                cardId: '',
                imgUrl: '',
                title: '',
                subtitle: ''
            },
            show: false,
            searchValue: '',
            shopDetail: {},
            shopList: []
        }
    },
    onLoad(options) {
        const { id } = options
        this.cardDetail.cardId = id
    },
    onShow() {
        console.log('onShow')
        cardRequest.read(this.cardDetail.cardId).then(res => {
            this.cardDetail = res.data
        })
        this.shopDetail =  {
            id: wx.getStorageSync('shopId'),
            shopName: wx.getStorageSync('shopName'),
        }
    },
    methods: {
        handleTo() {
            Interceptor().then(res => {
                if (this.cardDetail.cardId) {
                    uni.redirectTo({
                        url: '/pages/desgin/edit?id=' +this.cardDetail.cardId
                    })
                }
            })
        },
        handlePrint() {
            Interceptor().then(res => {
                if (this.cardDetail.cardId) {
                    // 搜索店铺
                    this.show = true
                }
            })
        },
        handleClose() {
            this.show = false
            this.handleResetShop()
        },
        // 搜索店铺
        onChange(value) {
            this.searchValue =  value.detail
        },
        onSearch() {
            console.log(this.searchValue)
            searchShop(this.searchValue).then(res => {
                this.shopList = res.data
            })
        },
        handleChangeShop(item) {
            this.shopDetail = item
        },
        //
        handleResetShop() {
            this.shopDetail = {}
            this.shopList = []
        },
        onClick() {},
        handleConfirm() {
            if (wx.getStorageSync('userInfo').authedAvatar) {
                cardRequest.print({
                    cardId: this.cardDetail.cardId,
                    shopId: this.shopDetail.id
                }).then(res => {
                    wx.showToast({
                        title: "打印成功",
                        icon: "success",
                        duration: 1000
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    },1000)
                })
            }  else {
                wx.getUserProfile({
                    'lang': 'zh_CN',
                    'desc': '打印服务中展示用户头像',
                    success: (res) => {
                        request({
                            url: '/api/v1/auth/wx/userProfile',
                            method: 'POST',
                            data: res
                        }).then(res2 => {
                            wx.setStorageSync('userInfo', {
                                ...(wx.getStorageSync('userInfo') || {}),
                                ...(res2.data || {})
                            })
                            cardRequest.print({
                                cardId: this.cardDetail.cardId,
                                shopId: this.shopDetail.id
                            }).then(res3 => {
                                wx.showToast({
                                    title: "打印成功",
                                    icon: "success",
                                    duration: 1000
                                })
                                setTimeout(() => {
                                    uni.navigateBack()
                                },1000)
                            })
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="less">
.card-detail {
    height: 100vh;
    overflow: auto;
    background-color: rgb(245,245,245) !important;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img-box {
        height: 370px;
        background-color: #FFFFFF;
        border-radius: 6px;
        overflow: hidden;
    }
    .popup {
        height: 300px;
        color:rgba(31, 34, 45, 0.6);
        font-size: 14px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 16px 0 16px;
        }
        .shop-checked {
            width: 254px;
            background: #F6F6F6;
            border-radius: 6px;
            border: 1px solid #EBEBEB;
            font-size: 14px;
            color: #1F222D;
            padding: 8px 16px;
            line-height: 14px;
        }
        .shop-confirm-box {
            padding: 16px;
        }
        .shop-confirm-btn-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .shop-confirm-btn {
                width: 132px;
                height: 34px;
                background: #18CB69;
                border-radius: 4px;
                text-align: center;
                line-height: 34px;
                font-size: 14px;
                color: #FFFFFF;
            }
            .shop-confirm-tips {
                width: 197px;
                height: 18px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(31, 34, 45, 0.3);
                line-height: 18px;
                margin-top: 15px;
                text-align: center;
            }
        }
        .van-search__label {
            display: none;
        }
        .map {
            height: 315px;
            padding: 0 16px;
            .shop-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #303030;
                font-size: 14px;
                height: 36px;
                border-bottom: 1px solid #f7f8fa;
            }
        }
    }
    img {
        width: 250px;
        height: 370px;
    }
    .card-detail-info {
        width: 100%;
        margin: 20px 0;
        padding-left: 50px;
        .name {
            height: 18px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1F222D;
            line-height: 18px;
        }
        .username {
            width: 222px;
            height: 18px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(31, 34, 45, 0.6);
            line-height: 18px;
        }
    }
    .footer-btns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 28px;
        .footer-btn {
            width: 118px;
            height: 34px;
            line-height: 34px;
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            color: #FFFFFF;
        }
        .footer-btn1 {
            background: #FFB740;
        }
        .footer-btn2 {
            background: #18CB69;
        }
    }
}
</style>
